<template>
    <div>
        <div class="take-meals">
            <div class="cashier-border" style="width: 79rem;height: 9rem; margin:10px 0 0 10px">
                <div class="item" id="navigation">
                    <el-row :gutter="20">
                        <el-col :span="6"><div class="grid-content bg-purple">
                            <el-button :type="condition.clean == 0?'primary':''" @click="no()">未沽清({{noOut}})</el-button>
                        </div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">
                            <el-button :type="condition.clean  == 1?'primary':''" @click="yes()">已沽清({{Out}})</el-button>
                        </div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">
                            <el-button type="primary" plain @click="oneKey()">一键沽清</el-button>
                        </div></el-col>
                        <el-col :span="6"><div class="grid-content bg-purple">
                            <el-button type="primary" plain @click="oneKeyClean()">一键清除沽清</el-button>
                        </div></el-col>
                    </el-row>
                </div>
                <div id="select">
                    <el-row :gutter="20">
                        <el-col :span="8"><div class="grid-content bg-purple">
                            <el-input
                                    placeholder="输入菜品名称查找"
                                    v-model="condition.name" class="meal-search float-left" clearable @input="selectBy()">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">
                            <el-input
                                    placeholder="扫码输入菜品编码查找"
                                    prefix-icon="fa fa-barcode"
                                    v-model="id" :class="{'meal-search':true}" clearable @input="selectBy()">
                            </el-input>
                        </div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    </el-row>
                </div>
            </div>
            <el-main class="order-content cashier-border" style="height: 31rem; width: 79rem;
    margin-left: 10px; margin-bottom: 10px;">
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="全部" name="first" class="all-div">
                            <div v-if="datas.length != 0">
                                <div class="meal-food card-div" v-for="item in datas"  @click="cleanOne(item)">
                                    <span class="meal-img" :style="{'background-image':'url(http://localhost:8080'+item.picPath+')'}"></span>
                                    <span class="meal-name">{{item.name}}</span>
                                    <span class="meal-stock-title">库存:</span><span class="meal-stock">{{item.inventoryCount}}</span>
                                    <span class="meal-price-item">
                                        <span class="i-rmb"><i class="fa fa-jpy"></i></span><span class="meal-price">{{item.price.toFixed(2)}}</span>
                                    </span>
                                </div>
                            </div>
                            <div class="cart-empty" v-if="datas.length == 0">
                                <img src="../../assets/imgs/ia_100001880.png"/>
                                <div class="cart-empty">暂无菜品</div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane v-for="item in types" :label="item.name" :name="item.id+''" class="all-div">
                            <div class="" v-if="datas.length != 0" >
                                <div class="meal-food card-div" v-for="item in datas" @click="cleanOne(item)">
                                    <span class="meal-img" :style="{'background-image':'url(http://localhost:8080'+item.picPath+')'}"></span>
                                    <span class="meal-name">{{item.name}}</span>
                                    <span class="meal-stock-title">库存:</span><span class="meal-stock">{{item.inventoryCount}}</span>
                                    <span class="meal-price-item">
                                        <span class="i-rmb"><i class="fa fa-jpy"></i></span><span class="meal-price">{{item.price.toFixed(2)}}</span>
                                    </span>
                                </div>
                            </div>
                            <div class="cart-empty" v-if="datas.length == 0">
                                <img src="../../assets/imgs/ia_100001880.png"/>
                                <div class="cart-empty">暂无菜品</div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </el-main>
        </div>
    </div>
</template>

<script>
    import axios_vue from 'axios'
    //axios_vue.defaults.headers.post['Content-type']='application/json;charset=UTF-8';
    export default {
        name: "Clean",
        data() {
            return{
                /*未沽清数量*/
                noOut:0,
                /*已沽清*/
                Out:0,
                activeName:'first',
                /*菜品分类*/
                types:[],
                /*菜品*/
                datas:[],
                id:'',
                condition:{
                    clean:0,
                    typeId:-1,
                    updateClean:-1,
                    name:'',
                    id:''
                }
            }
        },
        methods:{
            cleanOne(item){
                let conditionTemp=this.condition;
                conditionTemp.updateClean = item.clear == 0?1:0;
                conditionTemp.id = item.id;
                let _this = this;
                axios_vue.post('food/updateclean',conditionTemp)
                    .then(function (response) {
                        _this.datas = [];
                        _this.datas = response.data.datas;
                        _this.noOut = response.data.onCount;
                        _this.Out = response.data.yesCount;
                        _this.$notify({
                            title: '成功',
                            message: '操作完成',
                            type: 'success'
                        });
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            selectBy(){
                this.request();
            },
            no(){
                this.condition.clean = 0;
                this.request();
            },
            yes(){
                this.condition.clean = 1;
                this.request();
            },
            keyUpdate(){
                let _this = this;
                this.condition.id = this.id;
                axios_vue.post('food/updateclean',this.condition)
                    .then(function (response) {
                        _this.datas = [];
                        _this.datas = response.data.datas;
                        _this.noOut = response.data.onCount;
                        _this.Out = response.data.yesCount;
                        _this.$notify({
                            title: '成功',
                            message: '操作完成',
                            type: 'success'
                        });
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            oneKey(){
                this.condition.updateClean = 1;
                this.keyUpdate();
            },
            oneKeyClean(){
                this.condition.updateClean = 0;
                this.keyUpdate();
            },
            handleClick(tab, event) {
                if(tab.name == 'first'){
                    this.condition.typeId = -1;
                }else{
                    this.condition.typeId = tab.name;
                }
                this.request();

            },
            request(){
                let _this = this;
                this.condition.id = this.id;
                axios_vue.post('food/show',this.condition)
                    .then(function (response) {
                        console.log(response);
                        _this.datas = [];
                        _this.datas = response.data.datas;
                        _this.noOut = response.data.onCount;
                        _this.Out = response.data.yesCount;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        created() {
            let _this = this;
            this.request();
            this.$axios.get('gory/list')
                .then(function (response) {
                    _this.types = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
</script>

<style scoped>
    @import "../../css/PublicCashier.css";
    @import "../../css/Order.css";
    @import "../../css/Clean.css";
</style>
